/*
 * @Description: 消息列表
 * @Author: jian.chen
 * @Date: 2019-11-04 10:54:46
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-12-16 20:08:34
 */
<template>
  <div id="app">
    <scroll
      class="customRouteOrderList_wrap"
      ref="scroll"
      :useBody="useBody"
      :getListData="getListDataByScroll"
      :up="up"
      v-show="show === DATA_LIST"
    >
      <template v-if="!isNoData">
        <notice-list
          v-for="(item, key) in getListByApi"
          :item="item"
          :key="key"
          :afreshState="afreshState"
          :getUnreadQuantity="getUnreadQuantity"
          :appVersion="appVersion"
        ></notice-list>
      </template>
      <!-- 无数据展示 -->
      <no-data
        v-else
        text="暂无内容"
      />
    </scroll>
    <net-error
      @click.native="onNetError"
      v-show="show === DATA_NETERROR"
    />
    <!-- <template>
      <notice-list
        v-for="(item, key) in getListByApi"
        :item="item"
        :key="key"
      ></notice-list>
    </template> -->
  </div>
</template>

<script>
import NoticeList from './page/noticeList'
import { XBScroll } from 'vue-xb-ui-depot'
import NetError from './error/NetError'
import { getConsumeList, unreadQuantity, allMessageRead } from './api/api.js'
import NoData from './error/NoData'
export default {
  name: 'App',
  components: {
    'notice-list': NoticeList,
    scroll: XBScroll,
    'net-error': NetError,
    'no-data': NoData
  },
  data() {
    return {
      show: 1,
      DATA_LIST: 1, // 正常数据显示
      DATA_NETERROR: 2, // 网络超时展示
      isNoData: false,
      // 是否使用body作为滑动容器
      useBody: false,
      up: {
        noMoreSize: 11,
        page: { size: 10 }
      },
      getListByApi: [],
      appVersion: ''
    }
  },
  methods: {
    getListDataByScroll(pageIndex, pageSize) {
      return getConsumeList(pageIndex, pageSize)
        .then(res => {
          if (res.COUNT === 0) {
            this.isNoData = true
            console.log('222')
            return { length: pageSize, count: 1 }
          } else {
            this.isNoData = false
            this.getListByApi =
              pageIndex === 1 ? res.LIST : this.getListByApi.concat(res.LIST)
            return { length: pageSize, count: res.COUNT }
          }
        })
        .catch(err => {
          console.dir(err)
          this.show = this.DATA_NETERROR
          console.log(this.show, this.DATA_NETERROR)
          if (err.error.code === 'ECONNABORTED') {
            this.show = this.DATA_NETERROR
          }
        })
    },
    getUnreadQuantity() {
      // 获取用户未读总数
      console.log('获取用户未读总数')
      return unreadQuantity().then(res => {
        // window.x_system.syncUnreadMessageCount(() => { console.log('未读总数传递成功') }, () => { console.log('未读总数传递失败') }, res.COUNT)
        this.$System.then(System => {
          System.syncUnreadMessageCount(
            res.COUNT,
            () => {
              console.log('未读总数传递成功')
            },
            () => {
              console.log('未读总数传递失败')
            }
          )
        })
      })
    },
    // 进行操作成功后刷新
    afreshState() {
      console.log('刷新')
      this.reset()
      this.$refs.scroll.mescroll.resetUpScroll()
      this.$EventBus.$emit('afreshState')
    },
    // 重置数据
    reset() {
      this.getListByApi = []
      this.show = 1
    },
    // 无网络点击重新获取数据
    onNetError() {
      this.show = this.DATA_LIST
      this.afreshState()
    },
    addEvent() {
      let that = this
      document.addEventListener('resume', function () {
        that.getUnreadQuantity()
      })
    },
    // 设置标题栏右侧按钮
    _setTitle() {
      var Menuitems = []
      var Menuitem = {}
      // var that = this
      var i = 1
      Menuitem.menutext = '标记已读'
      Menuitem.menuid = i
      Menuitem.menuicon = ''
      Menuitems.push(Menuitem)
      this.$UI.then(UI => {
        UI.setRightItem(Menuitems, () => { console.log('标记已读按钮生成成功') }, () => { console.log('标记已读按钮生成失败') })
      })
      window.onMenuSelect = (index) => {
        return allMessageRead()
          .then(res => {
            this.$System.then(System => {
              System.syncUnreadMessageCount(
                0,
                () => {
                  console.log('未读总数传递成功')
                },
                () => {
                  console.log('未读总数传递失败')
                }
              )
            })
            this.afreshState()
          })
          .catch(err => {
            console.dir(err)
          })
      }
    },
    // 获取版本号
    getAppVersionInfo() {
      // 获取版本号
      this.$System.then(System => {
        System.getAppVersionInfo(
          msg => {
            console.log('获取版本号:' + msg)
            let versionInfo = JSON.parse(msg)
            this.appVersion = versionInfo.version
          },
          err => {
            console.log('获取版本号失败', err)
          }
        )
      })
    }
  },

  mounted() {
    this.addEvent()
    this.getUnreadQuantity()
    this._setTitle()
    this.getAppVersionInfo()
    // this.getListByApi = getConsumeList()
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  display: flex;
}
/* 修复css边距合并带来的问题 */
body {
  position: absolute;
  width: 100%;
}
html {
  background-color: #f2f5f6;
}
#app {
  flex: 1;
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
